import React, { Component } from 'react';
import {
  Text,
  View
} from 'react-native';
import { WhiteSpace, WingBlank, Card } from 'antd-mobile';
import Echarts from 'native-echarts';
export class StationTemperChart extends Component {

  // 构造函数
  

  // state = {
  //   option: this.option
  // };
  render() {
    console.log("再次渲染");
    let option = {
      tooltip: {},
      xAxis: {
        data: this.props.keys
      },
      yAxis: {},
      series: [{
        name: '实时温度',
        type: 'bar',
        itemStyle: {
          normal: { color: '#1296db' }
        },
        data: this.props.data2
      }],
      visualMap: {
        top: 10,
        right: 0,
        pieces: [{
          gt: 0,
          lte: 45,
          color: '#16c218'
        }, {
          gt: 45,
          lte: 60,
          color: '#ff9224'
        }, {
          gt: 60,
          color: '#f11312'
        }],
        outOfRange: {
          color: '#999'
        }
      },
    }
   console.log(option);
   
    return (
      <WingBlank size="sm">
        <WhiteSpace size="sm" />
        <Card>
          <Card.Header
            title="温度域分布"
          />
          <Card.Body>
            <View style={{ width: '100%', height: '100%' }}>
              <Echarts option={option} />
            </View>
          </Card.Body>
          <Card.Footer content="footer content" />
        </Card>
      </WingBlank>
    );
  }
}
